<template>
  <div class="br-layout-relative">
    <div class="br-layout-absolute" style="left: 10px; right:10px;height: 40px;line-height: 40px;">
      <div class="br-table-top">
        <div class="br-table-top-item" @click="formDialog=true">
          <div class="icon"><i class="el-icon-plus"></i></div>
          <div class="text">新建</div>
        </div>
      </div>
    </div>
    <div class="br-layout-absolute" style="top:41px;left: 10px; right:10px;">
      <el-table border :data="tableData" v-loading="loading" fit>
        <el-table-column prop="name" label="子服务器名称" min-width="150">
          <template slot-scope="scope">
            <span :title="scope.row.name" class="br-text-over">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="hostname" label="主机地址" min-width="150">
          <template slot-scope="scope">
            <span :title="scope.row.hostname" class="br-text-over">{{scope.row.hostname}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="port" label="端口号" min-width="100">
        </el-table-column>
        <el-table-column prop="webAppName" label="应用名称" width="150">
          <template slot-scope="scope">
            <span :title="scope.row.webAppName" class="br-text-over">{{scope.row.webAppName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="账号" width="120">
          <template slot-scope="scope">
            <span :title="scope.row.username" class="br-text-over">{{scope.row.username}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="password" label="密码" width="120">
          <template slot-scope="scope">
            <span class="br-text-over">****</span>
          </template>
        </el-table-column>
        <el-table-column prop="master" label="主节点" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.master===0?'否':'是'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="180">
          <template slot-scope="scope">
            <span class="br-table-tools">
              <span class="text" @click="test(scope.row)">测试</span>
              <span class="text" @click="formDialog=true;slaveForm=scope.row;">编辑</span>
              <span class="text" @click="remove(scope.row)">删除</span>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog class="formDialog" :title="slaveForm.id?'编辑':'新建'" :destroy-on-close="true" v-if="formDialog"
      :visible.sync="formDialog" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :show-close="false"
      center>
      <el-form ref="slaveForm" :model="slaveForm" size="mini" :rules="rules" label-width="110px" label-position="left"
        v-loading="dialogLoading">
        <el-form-item label="子服务器名称" class="br-form-item" prop="name">
          <span slot="label" class="br-form-text">子服务器名称</span>
          <el-input v-model="slaveForm.name" placeholder="子服务器名称"></el-input>
        </el-form-item>
        <el-form-item label="主机名称" class="br-form-item" prop="hostname">
          <span slot="label" class="br-form-text">主机名称</span>
          <el-input v-model="slaveForm.hostname" placeholder="主机名称"></el-input>
        </el-form-item>
        <el-form-item label="端口号" class="br-form-item" prop="port">
          <span slot="label" class="br-form-text">端口号</span>
          <el-input v-model="slaveForm.port" placeholder="端口号"></el-input>
        </el-form-item>
        <el-form-item label="应用名称" class="br-form-item" prop="webAppName">
          <span slot="label" class="br-form-text">应用名称</span>
          <el-input v-model="slaveForm.webAppName" placeholder="应用名称"></el-input>
        </el-form-item>
        <el-form-item label="账号" class="br-form-item" prop="username">
          <span slot="label" class="br-form-text">账号</span>
          <el-input v-model="slaveForm.username" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" class="br-form-item" prop="password">
          <span slot="label" class="br-form-text">密码</span>
          <el-input type="password" v-model="slaveForm.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="是否为主节点URL" class="br-form-item" prop="master">
          <span slot="label" class="br-form-text">是否为主节点</span>
          <el-checkbox v-model="slaveForm.master" :true-label="1" :false-label="0"></el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="mini" @click="clear">取 消</el-button>
        <el-button size="mini" @click="test(slaveForm)">测 试</el-button>
        <el-button type="primary"  size="mini" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog class="testDialog" :visible.sync="testDialog" v-if="testDialog" :showClose="false">
      <div class="br-flex-center" v-loading="testLoading" element-loading-text="正在测试连接,请稍等">
        <div class="br-layout-relative br-flex-center" style="width: 450px;height: 250px;">
          <div class="br-text-align-center" style="width: 270px;height: 170px;" v-if="testStatus===0">
            <img style="margin-bottom: 20px;width: 96px;height: 96px;" src="../../../assets/success.png"></img>
            <div class="br-margin-bottom">连接成功</div>
          </div>
          <div class="br-text-align-center" style="width: 270px;height: 170px;" v-else-if="testStatus===1">
            <img style="margin-bottom: 20px;width: 96px;height: 96px;" src="../../../assets/fail.png"></img>
            <div class="br-margin-bottom">测试连接失败</div>
            <el-button size="mini" @click="foldMsg?foldMsg=false:foldMsg=true">{{foldMsg?'收起信息':'展开信息'}}</el-button>
            <el-button size="mini" @click="quitTest">返回</el-button>
            <el-button type="primary" size="mini" @click="test(slaveForm)">重新连接</el-button>
          </div>
        </div>
      </div>
      <div class="br-layout-relative  br-textarea-view" v-if="foldMsg" style="width: 430px;max-height: 300px;margin-left: 10px;">
        {{message}}
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getSlaveList,
    remove,
    test,
    save,
  } from '@/api/slave/slave'
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        loading: false,
        dialogLoading: false,
        tableData: [],
        formDialog: false,
        rules: {
          name: [{
            required: true,
            message: '请输入子服务器名称',
            trigger: 'blur'
          }],
          hostname: [{
            required: true,
            message: '请输入主机地址',
            trigger: 'blur'
          }],
          port: [{
            required: true,
            message: '请输入端口号',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
        },
        slaveForm: {
          id: '',
          name: '',
          hostname: "",
          port: '',
          webAppName: "",
          username: "",
          password: "",
          master: 0,
        },
        testDialog: false,
        testLoading: false,
        testStatus: -1,
        message: "",
        foldMsg: false,
        testLoading: false
      }
    },
    computed: {
      ...mapGetters(['sidebar']),
      isHeight() {
        return this.sidebar.height;
      }
    },
    methods: {
      getSlaveList() {
        this.loading = true;
        getSlaveList().then((res) => {
          this.loading = false;
          if (res.data.status == 200) {
            this.tableData = res.data.data;
          }
        })
      },
      clear() {
        this.formDialog = false;
        this.slaveForm = {
          id: '',
          name: '',
          hostname: "",
          port: '',
          webAppName: "",
          username: "",
          password: "",
          master: 0,
        };
      },
      save() {
        this.$refs["slaveForm"].validate((valid) => {
          if (valid) {
            this.dialogLoading = true;
            save(this.slaveForm).then((res) => {
              this.dialogLoading = false;
              if (res.data.status == 200) {
                this.clear();
                this.getSlaveList();
              }
            })
          }
        });
      },
      remove(slave) {
        this.$confirm('确定删除此服务器数据吗？', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(_ => {
            remove(slave.id).then((res) => {
              if (res.data.status == 200) {
                this.getSlaveList();
              }
            })
          })
          .catch(_ => {
            return;
          });
      },
      test(slave) {
        this.testDialog = true;
        this.testLoading = true;
        this.testStatus = -1;
        this.foldMsg = false;
        this.message = "";
        test(slave).then((res) => {
          this.testLoading = false;
          if (res.data.status === 200) {
            this.testStatus = 0;
          } else if (res.data.status === 504) {
            this.testStatus = 1;
            this.message = res.data.msg;
          }
        })
      },
      quitTest() {
        this.testDialog = false;
        this.foldMsg = false;
        this.message = "";
      }
    },
    created() {},
    mounted() {
      this.getSlaveList();
    }
  };
</script>

<style lang="less" scoped>
  .formDialog {
    /deep/ .el-dialog {
      width: 550px;
      height: 350px
    }
  }


  .testDialog {

    /deep/ .el-dialog {
      position: relative;
      top: 0;
      left: 0;
      width: 450px;
      min-height: 250px;
      margin: auto;
    }

    /deep/ .el-dialog .el-dialog__header {
      position: relative;
      display: none;
    }

    /deep/ .el-dialog .el-dialog__body {
      position: relative;
      padding: 0;
      width: 450px;
      min-height: 250px;
    }

    /deep/ .el-dialog .el-dialog__footer {
      position: relative;
      display: none;
    }
  }
</style>
